<template>
  <!-- <div class="op-group comp-op-filter">
    <div class="op-title">可视化推荐</div>
    <div :class="{ 'op-content': true, expand: isExpand }"> -->
  <div class="vis-list-wrapper">
    <VisualizationRecommend
      class="vis-list"
      @charts-loaded="updateContentHeight"
    />
    <!-- <div v-if="isShowExpandButton" class="expand-btn" @click="toggleExpand">
          {{ isExpand ? '收起' : '展开' }}
          <a-icon-font class="icon" type="iconicon-beifen" />
        </div>         -->
  </div>

  <!-- </div>
  </div> -->
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import VisualizationRecommend from '@/components/studio/data/node-edit-panel/VisualizationRecommend.vue'

@Component({
  components: {
    VisualizationRecommend,
  },
})
export default class VisualizationRecommendCard extends Vue {
  private isExpand: boolean = false
  private contentHeight: number = 0
  private containerHeightSmall: number = 358

  private toggleExpand() {
    this.isExpand = !this.isExpand
  }

  private get isShowExpandButton() {
    return this.contentHeight > this.containerHeightSmall
  }

  private updateContentHeight({ listHeight }: any) {
    this.contentHeight = listHeight
  }
}
</script>
<style lang="less" scoped>
@import url('@/views/studio/vr-operations/op.less');

.vis-list-wrapper {
  height: 100%;
}
</style>
